﻿<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="generator" content="Jekyll v3.6.0">
<title>媒体 &middot; BootstrapVue</title>
<!-- Bootstrap 核心CSS -->
<link href="../../../v4/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- 本文档额外专用css -->
<link href="../../../v4/assets/css/docsearch.min.css" rel="stylesheet">
<link href="../../../v4/assets/css/docs.min.css" rel="stylesheet">
<link href="../../style/bv_path.css" rel="stylesheet">

<!-- Favicons图标定义 -->
<link data-n-head="ssr" rel="manifest" href="../../manifest.json">
<link data-n-head="ssr" rel="shortcut icon" href="../../style/icons/icon_64.png">
<link data-n-head="ssr" rel="apple-touch-icon" href="../../style/icons/icon_512.png" sizes="512x512">

<!-- Meta关键字定义 -->
<meta name="description" content="The most popular HTML, CSS, and JS library in the world.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">

</head>
<body>
<a id="skippy" class="sr-only sr-only-focusable" href="#content">
<div class="container"> <span class="skiplink-text">跳到主体内容</span> </div>
</a>
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar"> <a class="navbar-brand mr-0 mr-md-2" href="../" aria-label="Bootstrap">
  <svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false">
    <title>Bootstrap</title>
    <path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/>
    <path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/>
  </svg>
  </a>
  <div class="navbar-nav-scroll">
    <ul class="navbar-nav bd-navbar-nav flex-row">
      <li class="nav-item"><a class="nav-link " href="../">首页</a></li>
      <li class="nav-item"><a class="nav-link" href="index.html">中文手册</a></li>
      <li class="nav-item"><a class="nav-link active" href="../components">组件</a></li>
      <li class="nav-item"><a class="nav-link " href="../directives">指令</a></li>
      <li class="nav-item"><a class="nav-link " href="../reference">参考</a></li>
      <li class="nav-item"><a class="nav-link " href="https://bootstrap-vue.org/play" target="_blank">体验</a></li>
      <li class="nav-item"><a class="nav-link " href="http://code.z01.com/v4"><i class="zi zi_bold" zico="粗"></i> Boostrap</a></li>
      <li class="nav-item"><a class="nav-link" href="http://ico.z01.com" target="_blank" rel="noopener">zico图标系统</a></li>
      <li class="nav-item"><a class="nav-link" href="http://www.z01.com" target="_blank" rel="noopener">Zoomla!逐浪CMS</a></li>
    </ul>
  </div>
  <ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
    <li class="nav-item dropdown"> <a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="alse"> v2.12.0 </a>
      <div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions"> 
        <a class="dropdown-item active" href="../../../bootstrap-vue/docs/4.0/">Latest (4.3.x)</a>
        <a class="dropdown-item" href="/Boot/">v3.3.7</a>
        <a class="dropdown-item" href="/Sass/">Sass语言</a>
        <a class="dropdown-item" href="/Emmet/">Emmet语法</a>
        <a class="dropdown-item" href="//www.z01.com/tool/" target="_blank">IIS站长工具</a>
        <a class="dropdown-item" href="//ad.z01.com/" target="_blank">广告源码</a>
        <a class="dropdown-item" href="//v.z01.com/mb/" target="_blank">免费模板</a>
        <a class="dropdown-item" href="//v.z01.com/" target="_blank">H5移动创作</a>
        <a class="dropdown-item" href="//www.z01.com/help/web/3234.shtml" target="_blank">Flexbox布局</a>
		<a class="dropdown-item" href="/boot/font.html" target="_blank">Font Awesome</a>
</div>
    </li>
    <li class="nav-item"> <a class="nav-link p-2" href="//zoomla.github.io/bootstrap4-zhcn-documentation" target="_blank" rel="noopener" aria-label="GitHub">
      <svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false">
        <title>GitHub</title>
        <path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/>
      </svg>
      </a> </li>
    <li class="nav-item"> <a class="nav-link p-2" href="http://www.z01.com/blog/ren/3214.shtml" target="_blank" rel="noopener" aria-label="Slack">译者说</a></li>
  </ul>
  <a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="download.html">下载 Bootstrap</a> </header>

<div class="container-fluid">
  <div class="row flex-xl-nowrap">
    <div class="col-12 col-md-3 col-xl-2 bd-sidebar">
      <form class="bd-search d-flex align-items-center">
        <input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off">
        <button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
        <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false">
          <title>Menu</title>
          <path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/>
        </svg>
        </button>
      </form>


<nav class="collapse bd-links" id="bd-docs-nav">
<div class=""><a href="../" class="bd-toc-link">首页</a></div>
<div class="bd-toc-item nuxt-link-exact-active "><a href="../../../bootstrap-vue/docs/" class="bd-toc-link  "> 起步 </a>
<ul class="nav bd-sidenav">
</ul>
</div>
<div class="bd-toc-item active"><a href="../../../bootstrap-vue/docs/components/" class="bd-toc-link nuxt-link-exact-active"> 组件 </a>
<ul class="nav bd-sidenav">
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/index.html" class="nav-link"> 组件目录 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/alert.html" class="nav-link"> 警告提示框(Alert) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/badge.html" class="nav-link"> 徽章(Badge) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/badge.html" class="nav-link"> 面包屑导航(Breadcrumb) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/button.html" class="nav-link"> 按钮(Button) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/button-group.html" class="nav-link"> 按钮组(Button Group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/button-toolbar.html" class="nav-link"> 按钮Toolbar(Button Toolbar) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/calendar.html" class="nav-link"> 日历组件(Calendar) <small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/card.html" class="nav-link"> 卡片(Card) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/carousel.html" class="nav-link"> 轮播效果(Carousel) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/collapse.html" class="nav-link"> 折叠面板(Collapse) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/dropdown.html" class="nav-link"> 下拉菜单(Dropdown) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/embed.html" class="nav-link"> 嵌入(Embed) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form.html" class="nav-link"> 表单(Form) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-checkbox.html" class="nav-link"> 表单复选框(Form Checkbox) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-datepicker.html" class="nav-link"> 表单时间选择器(Form Datepicker) <small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-file.html" class="nav-link"> 文件选择(Form File) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-group.html" class="nav-link"> 表单组合(Form Group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-input.html" class="nav-link"> 表单输入框(Form Input) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-radio.html" class="nav-link"> 单选择表单Form Radio </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-select.html" class="nav-link"> 下拉式表单(Form Select) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-spinbutton.html" class="nav-link"> 按钮式表单(Form Spinbuttno) <small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-tags.html" class="nav-link"> Tags表单选择器(Form Tags) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-textarea.html" class="nav-link"> 文本框(Form Textarea) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-timepicker.html" class="nav-link"> 表单内时间控件(Form Timepicker) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/image.html" class="nav-link"> 图片(Image) </a></li>

<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/input-group.html" class="nav-link"> 输入框(Input Group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/jumbotron.html" class="nav-link"> Hero大块屏(Jumbotron) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/layout.html" class="nav-link"> 布局与网络Layout and Grid System </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/link.html" class="nav-link"> 链接(Link)</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/list-group.html" class="nav-link"> 列表组(List group) </a></li>
<li class="nav-item active"><a href="../../../bootstrap-vue/docs/components/media.html" class="nav-link"> 媒体(Media) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/modal.html" class="nav-link"> 弹出模态框(Modal) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/nav.html" class="nav-link"> 导航(Nav) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/navbar.html" class="nav-link"> 导航栏(Navbar) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/pagination.html" class="nav-link"> 分页(Pagination) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/pagination-nav.html" class="nav-link"> 分页导航(Pagination Nav) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/popover.html" class="nav-link"> 指示备注(Popover) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/progress.html" class="nav-link"> 进度指示器(Progress) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/spinner.html" class="nav-link"> 旋转指示器(Spinner) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/table.html" class="nav-link"> 表格(Table) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/tabs.html" class="nav-link"> 选项卡(Tabs) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/time.html" class="nav-link"> 时间组件(Time) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/toast.html" class="nav-link"> 冒泡推送(Toasts) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/tooltip.html" class="nav-link"> tip提示组件(Tooltip) </a></li>
</ul>
</div>
<div class="bd-toc-item"><a href="../../../bootstrap-vue/docs/directives/" class="bd-toc-link"> 指令 </a>
<ul class="nav bd-sidenav">
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/index.html" class="nav-link"> 指令目录 </a></li>
<li class="nav-item active"><a href="../../../bootstrap-vue/docs/directives/hover.html" class="nav-link"> Hover 指令<small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/popover.html" class="nav-link"> Popover 提示备注</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/scrollspy.html" class="nav-link"> Scrollspy 滚动监听</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/tooltip.html" class="nav-link"> Tooltip 提示指令</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/visible.html" class="nav-link"> Visible 可见性操作<small class="badge text-uppercase badge-success">New</small> </a></li>
</ul>
</div>
<div class="bd-toc-item"><a href="../../../bootstrap-vue/docs/icons.html" class="bd-toc-link"> Icons图标</a>
<ul class="nav bd-sidenav">
</ul>
</div>
  
<div class="bd-toc-item"><a class="bd-toc-link" href="../../../bootstrap-vue/docs/reference">参考</a>
<ul class="nav bd-sidenav">
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference" class="nav-link.html"> 参考目录 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/accessibility.html" class="nav-link">友好访问</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/color-variants.html" class="nav-link">Color颜色变量 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/images.html" class="nav-link"> 组件图像img的src路径解析</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/router-links.html" class="nav-link"> Router路由支持 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/size-props.html" class="nav-link">大小规格</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/spacing-classes.html" class="nav-link">间距处理</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/starter-templates.html" class="nav-link">开始模板</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/theming.html" class="nav-link">主题色彩</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/utility-classes.html" class="nav-link">通用Class类</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/validation.html" class="nav-link">Form表单验证</a></li>
</ul>
</div>
<div class=""><a href="https://bootstrap-vue.org/play" class="bd-toc-link" target="_blank">在线模拟器</a></div>
</nav>
</div>

<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="nav-item toc-entry mb-2"><a target="_self" href="#media" class="nav-link font-weight-bold"><span>媒体(Media)</span></a></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#usage" class="nav-link"><span>用法</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#no-body-with-sub-components" class="nav-link"><span>无主体（带子组件）</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#order" class="nav-link"><span>命令</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#nesting" class="nav-link"><span>嵌套</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#vertical-align" class="nav-link"><span>垂直对齐</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#media-list" class="nav-link"><span>Media 列表</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#component-reference" class="nav-link"><span>组件引用</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#comp-ref-b-media" class="nav-link"><span>&lt;b-media&gt;</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#comp-ref-b-media-aside" class="nav-link"><span>&lt;b-media-aside&gt;</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#comp-ref-b-media-body" class="nav-link"><span>&lt;b-media-body&gt;</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#importing-individual-components" class="nav-link"><span>导入单个组件</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#importing-as-a-plugin" class="nav-link"><span>作为Vue.js插件导入</span></a></li>
</ul>
</li>
</ul>

</div>

<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">

<nav data-v-aafc4aea="" aria-label="Breadcrumbs" class="float-left mt-2 mb-0 mb-lg-2">
<ol data-v-aafc4aea="" class="breadcrumb d-inline-flex bg-transparent px-2 py-1 my-0">
<li data-v-aafc4aea="" class="breadcrumb-item"><a data-v-aafc4aea="" href="../../" class="nuxt-link-active" target="_self">首页</a></li>
<li data-v-aafc4aea="" class="breadcrumb-item"><a data-v-aafc4aea="" href="../../../bootstrap-vue/docs" class="nuxt-link-active" target="_self">中文手册</a></li>
<li data-v-aafc4aea="" class="breadcrumb-item"><a data-v-aafc4aea="" href="../../../bootstrap-vue/docs/components/" class="nuxt-link-active" target="_self">组件</a></li>
<li data-v-aafc4aea="" class="breadcrumb-item active"><span data-v-aafc4aea="" aria-current="location">媒体</span></li>
</ol>
</nav>
<div class="clearfix d-block"></div>
  <h1 class="bd-title" id="content">媒体(Media)</h1>
<p class="bd-lead">media对象有助于构建复杂且重复的组件，其中一些媒体与不围绕所述媒体的内容放在一起。另外，由于flexbox，它只需要两个必修课。</p>
  <script type="text/javascript" src="../../../v4/assets/js/pupCMS.js"></script>




<nav class="bd-quick-links mb-3 d-xl-none" data-v-811345e6="">
<header data-v-811345e6="">
<button data-v-811345e6="" type="button" class="btn font-weight-bold btn-outline-secondary btn-sm btn-block collapsed" aria-controls="bd-quick-links-collapse" aria-expanded="false"><span data-v-811345e6="">Show</span> page table of contents </button>
</header>
<ul data-v-811345e6="" id="bd-quick-links-collapse" class="collapse" style="display: none;">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#usage" class=""><span data-v-811345e6="">Usage</span></a> </li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#no-body-with-sub-components" class=""><span data-v-811345e6="">No body (with sub-components)</span></a> </li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#order" class=""><span data-v-811345e6="">Order</span></a> </li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#nesting" class=""><span data-v-811345e6="">Nesting</span></a> </li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#vertical-align" class=""><span data-v-811345e6="">Vertical align</span></a> </li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#media-list" class=""><span data-v-811345e6="">Media list</span></a> </li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#component-reference" class=""><span data-v-811345e6="">Component reference</span></a>
<ul data-v-811345e6="">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#comp-ref-b-media" class=""><span data-v-811345e6="">&lt;b-media&gt;</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#comp-ref-b-media-aside" class=""><span data-v-811345e6="">&lt;b-media-aside&gt;</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#comp-ref-b-media-body" class=""><span data-v-811345e6="">&lt;b-media-body&gt;</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#importing-individual-components" class=""><span data-v-811345e6="">Importing individual components</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#importing-as-a-plugin" class=""><span data-v-811345e6="">Importing as a Vue.js plugin</span></a></li>
</ul>
</li>
</ul>
</nav>
<div translate="translate" class="bd-example vue-example vue-example-b-media notranslate">
<div>
<div class="card">
<div class="card-body">
<div class="media">
<div class="d-flex mr-3 align-self-start"><img src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2264%22%20height%3D%2264%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20%25%7Bw%7D%20%25%7Bh%7D%22%20preserveAspectRatio%3D%22none%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20style%3D%22fill%3A%23ccc%3B%22%3E%3C%2Frect%3E%3C%2Fsvg%3E" alt="placeholder" width="64" height="64" class=""></div>
<div class="media-body">
<h5 class="mt-0">Media Title</h5>
<p> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin.
        Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc
        ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. </p>
<p> Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque
        penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
<div class="media">
<div class="d-flex mr-3 align-self-start"><img src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2264%22%20height%3D%2264%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20%25%7Bw%7D%20%25%7Bh%7D%22%20preserveAspectRatio%3D%22none%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20style%3D%22fill%3A%23ccc%3B%22%3E%3C%2Frect%3E%3C%2Fsvg%3E" alt="placeholder" width="64" height="64" class=""></div>
<div class="media-body">
<h5 class="mt-0">Nested Media</h5>
<p class="mb-0"> Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in
          faucibus. </p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-card</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-media</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:aside</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-img</span> <span class="hljs-attr">blank</span> <span class="hljs-attr">blank-color</span>=<span class="hljs-string">"#ccc"</span> <span class="hljs-attr">width</span>=<span class="hljs-string">"64"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"placeholder"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-img</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

      <span class="hljs-tag">&lt;<span class="hljs-name">h5</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mt-0"</span>&gt;</span>Media Title<span class="hljs-tag">&lt;/<span class="hljs-name">h5</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>
        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin.
        Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc
        ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
      <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>
        Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque
        penatibus et magnis dis parturient montes, nascetur ridiculus mus.
      <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>

      <span class="hljs-tag">&lt;<span class="hljs-name">b-media</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:aside</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">b-img</span> <span class="hljs-attr">blank</span> <span class="hljs-attr">blank-color</span>=<span class="hljs-string">"#ccc"</span> <span class="hljs-attr">width</span>=<span class="hljs-string">"64"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"placeholder"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-img</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

        <span class="hljs-tag">&lt;<span class="hljs-name">h5</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mt-0"</span>&gt;</span>Nested Media<span class="hljs-tag">&lt;/<span class="hljs-name">h5</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-0"</span>&gt;</span>
          Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in
          faucibus.
        <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-media</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-media</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-card</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
<h2 id="usage" class="bv-no-focus-ring"><span class="bd-content-title">用法<a class="anchorjs-link" href="#usage" aria-labelledby="usage"></a></span></h2>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-media</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:aside</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"..."</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Media Aside"</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>Media Body<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Some text<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>

    <span class="hljs-comment">&lt;!-- b-[Optional: add media children here for nesting] --&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-media</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
<h2 id="no-body-with-sub-components" class="bv-no-focus-ring"><span class="bd-content-title">无主体（带子组件）<a class="anchorjs-link" href="#no-body-with-sub-components" aria-labelledby="no-body-with-sub-components"></a></span></h2>
<div translate="translate" class="bd-example vue-example vue-example-b-media-no-body notranslate">
<div>
<div class="card">
<div class="card-body">
<div class="media">
<div class="d-flex align-self-center"><img src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22128%22%20height%3D%22256%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20%25%7Bw%7D%20%25%7Bh%7D%22%20preserveAspectRatio%3D%22none%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20style%3D%22fill%3A%23ccc%3B%22%3E%3C%2Frect%3E%3C%2Fsvg%3E" alt="placeholder" width="128" height="256" class=""></div>
<div class="media-body ml-3">
<h5 class="mt-0">Media Title</h5>
<p> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante
          sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce
          condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. </p>
<p class="mb-0"> Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis
          natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
<div class="media">
<div class="d-flex mr-3 align-self-start"><img src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2264%22%20height%3D%2264%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20%25%7Bw%7D%20%25%7Bh%7D%22%20preserveAspectRatio%3D%22none%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20style%3D%22fill%3A%23ccc%3B%22%3E%3C%2Frect%3E%3C%2Fsvg%3E" alt="placeholder" width="64" height="64" class=""></div>
<div class="media-body">
<h5 class="mt-0">Nested Media</h5>
Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in
          faucibus. </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-card</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-media</span> <span class="hljs-attr">no-body</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-media-aside</span> <span class="hljs-attr">vertical-align</span>=<span class="hljs-string">"center"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-img</span> <span class="hljs-attr">blank</span> <span class="hljs-attr">blank-color</span>=<span class="hljs-string">"#ccc"</span> <span class="hljs-attr">width</span>=<span class="hljs-string">"128"</span> <span class="hljs-attr">height</span>=<span class="hljs-string">"256"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"placeholder"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-img</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-media-aside</span>&gt;</span>

      <span class="hljs-tag">&lt;<span class="hljs-name">b-media-body</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"ml-3"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">h5</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mt-0"</span>&gt;</span>Media Title<span class="hljs-tag">&lt;/<span class="hljs-name">h5</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>
          Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante
          sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce
          condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
        <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-0"</span>&gt;</span>
          Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis
          natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
        <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>

        <span class="hljs-tag">&lt;<span class="hljs-name">b-media</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:aside</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">b-img</span> <span class="hljs-attr">blank</span> <span class="hljs-attr">blank-color</span>=<span class="hljs-string">"#ccc"</span> <span class="hljs-attr">width</span>=<span class="hljs-string">"64"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"placeholder"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-img</span>&gt;</span>
          <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">h5</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mt-0"</span>&gt;</span>Nested Media<span class="hljs-tag">&lt;/<span class="hljs-name">h5</span>&gt;</span>
          Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in
          faucibus.
        <span class="hljs-tag">&lt;/<span class="hljs-name">b-media</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-media-body</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-media</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-card</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
<h2 id="order" class="bv-no-focus-ring"><span class="bd-content-title">命令<a class="anchorjs-link" href="#order" aria-labelledby="order"></a></span></h2>
<p>
  通过添加<code translate="no" class="notranslate text-nowrap">right-align</code>属性更改媒体对象中内容的顺序。
</p>
<div translate="translate" class="bd-example vue-example vue-example-b-media-order notranslate">
<div>
<div class="media">
<div class="media-body">
<h5 class="mt-0 mb-1">Media object</h5>
<p class="mb-0"> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin.
      Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac
      nisi vulputate fringilla. Donec lacinia congue felis in faucibus. </p>
</div>
<div class="d-flex ml-3 align-self-center"><img src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2280%22%20height%3D%2280%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20%25%7Bw%7D%20%25%7Bh%7D%22%20preserveAspectRatio%3D%22none%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20style%3D%22fill%3A%23ccc%3B%22%3E%3C%2Frect%3E%3C%2Fsvg%3E" alt="placeholder" width="80" height="80" class=""></div>
</div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-media</span> <span class="hljs-attr">right-align</span> <span class="hljs-attr">vertical-align</span>=<span class="hljs-string">"center"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:aside</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-img</span> <span class="hljs-attr">blank</span> <span class="hljs-attr">blank-color</span>=<span class="hljs-string">"#ccc"</span> <span class="hljs-attr">width</span>=<span class="hljs-string">"80"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"placeholder"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-img</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">h5</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mt-0 mb-1"</span>&gt;</span>Media object<span class="hljs-tag">&lt;/<span class="hljs-name">h5</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-0"</span>&gt;</span>
      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin.
      Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac
      nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
    <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-media</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
<h2 id="nesting" class="bv-no-focus-ring"><span class="bd-content-title">嵌套<a class="anchorjs-link" href="#nesting" aria-labelledby="nesting"></a></span></h2>
<p>
  通过在父体中包含另一个<code translate="no" class="notranslate text-nowrap">&lt;b-media&gt;</code>，可以轻松嵌套媒体对象。
</p>
<h2 id="vertical-align" class="bv-no-focus-ring"><span class="bd-content-title">垂直对齐<a class="anchorjs-link" href="#vertical-align" aria-labelledby="vertical-align"></a></span></h2>
<p>
  侧边可以<code translate="no" class="notranslate text-nowrap">vertical-align</code>使用垂直对齐应该是<code translate="no" class="notranslate text-nowrap">top</code>, 
  <code translate="no" class="notranslate text-nowrap">center</code>或 
  <code translate="no" class="notranslate text-nowrap">end</code>。默认为<code translate="no" class="notranslate text-nowrap">top</code>。
</p>
<h2 id="media-list" class="bv-no-focus-ring"><span class="bd-content-title">Media 列表<a class="anchorjs-link" href="#media-list" aria-labelledby="media-list"></a></span></h2>
<p>
  因为media对象的结构需求很少，所以也可以将这些组件用作列表HTML元素。在 <code translate="no" class="notranslate text-nowrap">&lt;ul&gt;</code>或 
  <code translate="no" class="notranslate text-nowrap">&lt;ol&gt;</code>上，添加未设置样式的类列表以删除任何浏览器默认列表样式，
  然后使用<code translate="no" class="notranslate text-nowrap">&lt;b-media&gt;</code>组件并将标记属性设置为<code translate="no" class="notranslate text-nowrap">li</code>。与往常一样，在需要微调的地方使用间距实用程序。
</p>
<div translate="translate" class="bd-example vue-example vue-example-b-media-list notranslate">
<div>
<ul class="list-unstyled">
<li class="media">
<div class="d-flex mr-3 align-self-start"><img src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2264%22%20height%3D%2264%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20%25%7Bw%7D%20%25%7Bh%7D%22%20preserveAspectRatio%3D%22none%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20style%3D%22fill%3A%23abc%3B%22%3E%3C%2Frect%3E%3C%2Fsvg%3E" alt="placeholder" width="64" height="64" class=""></div>
<div class="media-body">
<h5 class="mt-0 mb-1">List-based media object</h5>
<p class="mb-0"> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin.
        Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc
        ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. </p>
</div>
</li>
<li class="media my-4">
<div class="d-flex mr-3 align-self-start"><img src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2264%22%20height%3D%2264%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20%25%7Bw%7D%20%25%7Bh%7D%22%20preserveAspectRatio%3D%22none%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20style%3D%22fill%3A%23cba%3B%22%3E%3C%2Frect%3E%3C%2Fsvg%3E" alt="placeholder" width="64" height="64" class=""></div>
<div class="media-body">
<h5 class="mt-0 mb-1">List-based media object</h5>
<p class="mb-0"> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin.
        Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc
        ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. </p>
</div>
</li>
<li class="media">
<div class="d-flex mr-3 align-self-start"><img src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2264%22%20height%3D%2264%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20%25%7Bw%7D%20%25%7Bh%7D%22%20preserveAspectRatio%3D%22none%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20style%3D%22fill%3A%23bac%3B%22%3E%3C%2Frect%3E%3C%2Fsvg%3E" alt="placeholder" width="64" height="64" class=""></div>
<div class="media-body">
<h5 class="mt-0 mb-1">List-based media object</h5>
<p class="mb-0"> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin.
        Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc
        ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. </p>
</div>
</li>
</ul>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"list-unstyled"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-media</span> <span class="hljs-attr">tag</span>=<span class="hljs-string">"li"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:aside</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-img</span> <span class="hljs-attr">blank</span> <span class="hljs-attr">blank-color</span>=<span class="hljs-string">"#abc"</span> <span class="hljs-attr">width</span>=<span class="hljs-string">"64"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"placeholder"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-img</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">h5</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mt-0 mb-1"</span>&gt;</span>List-based media object<span class="hljs-tag">&lt;/<span class="hljs-name">h5</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-0"</span>&gt;</span>
        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin.
        Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc
        ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
      <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-media</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">b-media</span> <span class="hljs-attr">tag</span>=<span class="hljs-string">"li"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"my-4"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:aside</span>&gt;</span>
       <span class="hljs-tag">&lt;<span class="hljs-name">b-img</span> <span class="hljs-attr">blank</span> <span class="hljs-attr">blank-color</span>=<span class="hljs-string">"#cba"</span> <span class="hljs-attr">width</span>=<span class="hljs-string">"64"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"placeholder"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-img</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

      <span class="hljs-tag">&lt;<span class="hljs-name">h5</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mt-0 mb-1"</span>&gt;</span>List-based media object<span class="hljs-tag">&lt;/<span class="hljs-name">h5</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-0"</span>&gt;</span>
        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin.
        Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc
        ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
      <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-media</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">b-media</span> <span class="hljs-attr">tag</span>=<span class="hljs-string">"li"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:aside</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-img</span> <span class="hljs-attr">blank</span> <span class="hljs-attr">blank-color</span>=<span class="hljs-string">"#bac"</span> <span class="hljs-attr">width</span>=<span class="hljs-string">"64"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"placeholder"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-img</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

      <span class="hljs-tag">&lt;<span class="hljs-name">h5</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mt-0 mb-1"</span>&gt;</span>List-based media object<span class="hljs-tag">&lt;/<span class="hljs-name">h5</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-0"</span>&gt;</span>
        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin.
        Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc
        ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
      <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-media</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
<!-- Component reference added automatically from component package.json -->

<h2 id="component-reference" tabindex="-1" class="bv-no-focus-ring"><span class="bd-content-title">组件引用<a href="../../../bootstrap-vue/docs/components/media#component-reference" class="anchorjs-link" aria-labelledby="component-reference" target="_self"></a></span></h2>
<section data-v-866a22e8="" class="bd-content">
<header data-v-866a22e8="" class="row align-items-center">
<div data-v-866a22e8="" class="col-sm-9">
<h3 data-v-866a22e8="" id="comp-ref-b-media" tabindex="-1" class="bv-no-focus-ring"><span data-v-866a22e8="" class="bd-content-title"><code data-v-866a22e8="" translate="translate" class="notranslate bigger">&lt;b-media&gt;</code><a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/media#comp-ref-b-media" class="anchorjs-link" aria-labelledby="comp-ref-b-media" target="_self"></a></span></h3>
<a data-v-866a22e8="" rel="noopener" target="_blank" href="https://vuejs.org/v2/guide/render-function.html#Functional-Components" class="badge badge-secondary"> 功能部件 </a></div>
<div data-v-866a22e8="" class="text-sm-right col-sm-3"><a data-v-866a22e8="" rel="noopener" target="_blank" href="https://github.com/bootstrap-vue/bootstrap-vue/tree/dev/src/components/media/media.js" class="btn btn-outline-secondary btn-sm"> View source </a></div>
</header>
<ul data-v-866a22e8="" class="component-ref-mini-toc my-3">
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-media-props"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-media&gt;</code> 属性 </a></li>
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-media-slots"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-media&gt;</code> Slots </a></li>
</ul>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-media-props" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> 属性 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/media#comp-ref-b-media-props" class="anchorjs-link" aria-labelledby="comp-ref-b-media-props" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="4" class="table b-table bv-docs-table table-striped" id="__BVID__2602">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">属性</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">类型</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">默认值</th>
<th role="columnheader" scope="col" aria-colindex="4" class="">描述</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" data-pk="tag" class="" id="__BVID__2602__row_tag">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">tag</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'div'</code></td>
<td aria-colindex="4" role="cell" class="">指定要呈现的HTML标记，而不是默认标记</td>
</tr>
<tr role="row" data-pk="right-align" class="" id="__BVID__2602__row_right-align">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">right-align</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">将右侧的“侧边”插槽呈现出来。默认值在左侧</td>
</tr>
<tr role="row" data-pk="vertical-align" class="" id="__BVID__2602__row_vertical-align">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">vertical-align</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'top'</code></td>
<td aria-colindex="4" role="cell" class="">“aside”插槽的垂直对齐方式：“start”（或“top”）、“center”或“end”（或“bottom”）</td>
</tr>
<tr role="row" data-pk="no-body" class="" id="__BVID__2602__row_no-body">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">no-body</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">设置后，不会在默认插槽内容周围呈现“b-media-body”包装</td>
</tr>
</tbody>
</table>
</div>
</article>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-media-slots" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> Slots <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/media#comp-ref-b-media-slots" class="anchorjs-link" aria-labelledby="comp-ref-b-media-slots" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="2" class="table b-table bv-docs-table table-striped" id="__BVID__2616">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">Slot 名称</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">描述</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" data-pk="aside" class="" id="__BVID__2616__row_aside">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">aside</code></td>
<td aria-colindex="2" role="cell" class="">除了Media</td>
</tr>
</tbody>
</table>
</div>
</article>
</section>
<section data-v-866a22e8="" class="bd-content">
<header data-v-866a22e8="" class="row align-items-center">
<div data-v-866a22e8="" class="col-sm-9">
<h3 data-v-866a22e8="" id="comp-ref-b-media-aside" tabindex="-1" class="bv-no-focus-ring"><span data-v-866a22e8="" class="bd-content-title"><code data-v-866a22e8="" translate="translate" class="notranslate bigger">&lt;b-media-aside&gt;</code><a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/media#comp-ref-b-media-aside" class="anchorjs-link" aria-labelledby="comp-ref-b-media-aside" target="_self"></a></span></h3>
<a data-v-866a22e8="" rel="noopener" target="_blank" href="https://vuejs.org/v2/guide/render-function.html#Functional-Components" class="badge badge-secondary"> 功能部件 </a></div>
<div data-v-866a22e8="" class="text-sm-right col-sm-3"><a data-v-866a22e8="" rel="noopener" target="_blank" href="https://github.com/bootstrap-vue/bootstrap-vue/tree/dev/src/components/media/media-aside.js" class="btn btn-outline-secondary btn-sm"> View source </a></div>
</header>
<ul data-v-866a22e8="" class="component-ref-mini-toc my-3">
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-media-aside-props"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-media-aside&gt;</code> 属性 </a></li>
</ul>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-media-aside-props" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> 属性 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/media#comp-ref-b-media-aside-props" class="anchorjs-link" aria-labelledby="comp-ref-b-media-aside-props" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="4" class="table b-table bv-docs-table table-striped" id="__BVID__2630">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">属性</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">类型</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">默认值</th>
<th role="columnheader" scope="col" aria-colindex="4" class="">描述</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" data-pk="tag" class="" id="__BVID__2630__row_tag">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">tag</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'div'</code></td>
<td aria-colindex="4" role="cell" class="">指定要呈现的HTML标记，而不是默认标记</td>
</tr>
<tr role="row" data-pk="vertical-align" class="" id="__BVID__2630__row_vertical-align">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">vertical-align</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'top'</code></td>
<td aria-colindex="4" role="cell" class="">侧边的垂直对齐方式：“开始”（或“顶部”）、“中心”或“结束”（或“底部”）</td>
</tr>
</tbody>
</table>
</div>
</article>
</section>
<section data-v-866a22e8="" class="bd-content">
<header data-v-866a22e8="" class="row align-items-center">
<div data-v-866a22e8="" class="col-sm-9">
<h3 data-v-866a22e8="" id="comp-ref-b-media-body" tabindex="-1" class="bv-no-focus-ring"><span data-v-866a22e8="" class="bd-content-title"><code data-v-866a22e8="" translate="translate" class="notranslate bigger">&lt;b-media-body&gt;</code><a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/media#comp-ref-b-media-body" class="anchorjs-link" aria-labelledby="comp-ref-b-media-body" target="_self"></a></span></h3>
<a data-v-866a22e8="" rel="noopener" target="_blank" href="https://vuejs.org/v2/guide/render-function.html#Functional-Components" class="badge badge-secondary">功能组件 </a></div>
<div data-v-866a22e8="" class="text-sm-right col-sm-3"><a data-v-866a22e8="" rel="noopener" target="_blank" href="https://github.com/bootstrap-vue/bootstrap-vue/tree/dev/src/components/media/media-body.js" class="btn btn-outline-secondary btn-sm"> View source </a></div>
</header>
<ul data-v-866a22e8="" class="component-ref-mini-toc my-3">
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-media-body-props"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-media-body&gt;</code> 属性 </a></li>
</ul>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-media-body-props" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> 属性 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/media#comp-ref-b-media-body-props" class="anchorjs-link" aria-labelledby="comp-ref-b-media-body-props" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="4" class="table b-table bv-docs-table table-striped" id="__BVID__2647">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">属性</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">类型</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">默认值</th>
<th role="columnheader" scope="col" aria-colindex="4" class="">描述</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" data-pk="tag" class="" id="__BVID__2647__row_tag">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">tag</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'div'</code></td>
<td aria-colindex="4" role="cell" class="">指定要呈现的HTML标记，而不是默认标记</td>
</tr>
</tbody>
</table>
</div>
</article>
<h3 id="importing-individual-components" tabindex="-1" class="bv-no-focus-ring"><span class="bd-content-title"> 导入单个组件<a href="../../../bootstrap-vue/docs/components/media#importing-individual-components" class="anchorjs-link" aria-labelledby="importing-individual-components" target="_self"></a></span></h3>
<p>可以通过以下命名导出将各个组件导入到项目中：</p>
<div class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="3" class="table b-table bv-docs-table table-striped" id="__BVID__2659">
<thead role="rowgroup" class="thead-default">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">Component</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">Named Export</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">Import Path</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">&lt;b-media&gt;</code></td>
<td aria-colindex="2" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">BMedia</code></td>
<td aria-colindex="3" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">bootstrap-vue</code></td>
</tr>
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">&lt;b-media-aside&gt;</code></td>
<td aria-colindex="2" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">BMediaAside</code></td>
<td aria-colindex="3" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">bootstrap-vue</code></td>
</tr>
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">&lt;b-media-body&gt;</code></td>
<td aria-colindex="2" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">BMediaBody</code></td>
<td aria-colindex="3" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">bootstrap-vue</code></td>
</tr>
</tbody>
</table>
</div>
<p><strong>例子:</strong></p>
<figure class="highlight"><pre translate="translate" class="hljs language-js text-monospace p-2 notranslate javascript"><span class="hljs-keyword">import</span> { BMedia } <span class="hljs-keyword">from</span> <span class="hljs-string">'bootstrap-vue'</span>
Vue.component(<span class="hljs-string">'b-media'</span>, BMedia)</pre></figure>
</article>
<article class="bd-content">
<h3 id="importing-as-a-plugin" tabindex="-1" class="bv-no-focus-ring"><span class="bd-content-title"> 作为Vue.js插件导入<a href="../../../bootstrap-vue/docs/components/media#importing-as-a-plugin" class="anchorjs-link" aria-labelledby="importing-as-a-plugin" target="_self"></a></span></h3>
<p>这个插件包括上面列出的所有独立组件。插件还包括任何组件别名。</p>
<div class="table-responsive-sm">
<table fileds="namedExport,importPath" role="table" aria-busy="false" aria-colcount="2" class="table b-table bv-docs-table table-striped b-table-caption-top" id="__BVID__2671">
<thead role="rowgroup" class="thead-default">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">Named Export</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">Import Path</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">MediaPlugin</code></td>
<td aria-colindex="2" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">bootstrap-vue</code></td>
</tr>
</tbody>
</table>
</div>
<p><strong>例子:</strong></p>
<figure class="highlight"><pre translate="translate" class="hljs language-js text-monospace p-2 notranslate javascript"><span class="hljs-keyword">import</span> { MediaPlugin } <span class="hljs-keyword">from</span> <span class="hljs-string">'bootstrap-vue'</span>
Vue.use(MediaPlugin)</pre></figure>








</main>
</div>
</div>


<script src="../../../v4/assets/js/vendor/jquery-slim.min.js"></script>
<script src="../../../v4/dist/js/popper.min.js"></script> 
<script src="../../../v4/dist/js/bootstrap.min.js"></script> 
<script src="../../../v4/assets/js/docs.min.js"></script> 
<script src="../../../v4/assets/js/ie-emulation-modes-warning.js"></script> 
<script src="../../../v4/assets/js/docsearch.min.js"></script> 
<script>
  docsearch({
    appId: 'PRR89ISST8',
    apiKey: '95044d57d4d7bb744f322d1f18ed607f',
    indexName: 'z01-bootstrapV4',
    inputSelector: '#search-input',
    handleSelected: function (input, event, suggestion) {
      var url = suggestion.url;
      url = suggestion.isLvl1 ? url.split('#')[0]: url;
      // If it's a title we remove the anchor so it does not jump.
      window.location.href = url;
    },
    transformData: function (hits) {
      return hits.map(function (hit) {
        hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
        return hit;
      });
    },
    debug: false // Set debug to true if you want to inspect the dropdown
  });
</script> 
<script>
  Holder.addTheme('gray', {
    bg: '#777',
    fg: 'rgba(255,255,255,.75)',
    font: 'Helvetica',
    fontweight: 'normal'
  });
</script>
</body>
</html>
